* {
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
  font-family: Consolas, "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: 0.05em;
  box-sizing: border-box; }

code, pre {
  color: #813c85;
  background-color: #fbecde;
  border-radius: 4px; }

.color-yellow {
  color: #fcd337; }
  .color-yellow.canhover:hover, .color-yellow.active {
    background-color: #fcd337;
    color: #ffffff; }

.backcolor-yellow {
  background-color: #fcd337; }

.color-orange {
  color: #f97d1c; }
  .color-orange.canhover:hover, .color-orange.active {
    background-color: #f97d1c;
    color: #ffffff; }

.backcolor-orange {
  background-color: #f97d1c; }

.color-red {
  color: #de1c31; }
  .color-red.canhover:hover, .color-red.active {
    background-color: #de1c31;
    color: #ffffff; }

.backcolor-red {
  background-color: #de1c31; }

.color-purple {
  color: #813c85; }
  .color-purple.canhover:hover, .color-purple.active {
    background-color: #813c85;
    color: #ffffff; }

.backcolor-purple {
  background-color: #813c85; }

.color-blue {
  color: #2775b6; }
  .color-blue.canhover:hover, .color-blue.active {
    background-color: #2775b6;
    color: #ffffff; }

.backcolor-blue {
  background-color: #2775b6; }

.color-green {
  color: #45b787; }
  .color-green.canhover:hover, .color-green.active {
    background-color: #45b787;
    color: #ffffff; }

.backcolor-green {
  background-color: #45b787; }

.color-cyan {
  color: #1a94bc; }
  .color-cyan.canhover:hover, .color-cyan.active {
    background-color: #1a94bc;
    color: #ffffff; }

.backcolor-cyan {
  background-color: #1a94bc; }

.color-gray {
  color: #bbb5ac; }
  .color-gray.canhover:hover, .color-gray.active {
    background-color: #bbb5ac;
    color: #ffffff; }

.backcolor-gray {
  background-color: #bbb5ac; }

.color-default {
  color: #444444; }

.ym-outWrapper {
  display: flex;
  flex-direction: row; }
  .ym-outWrapper .ym-container {
    flex-grow: 1; }
    .ym-outWrapper .ym-container .contentWrapper {
      width: 100%;
      height: 100%;
      min-height: 100vh;
      padding: 2em 0;
      box-sizing: border-box; }
    .ym-outWrapper .ym-container .ym-content {
      width: 768px;
      margin: 0 auto;
      background-color: #ffffff;
      box-sizing: border-box;
      padding: 1em;
      border-radius: 5px; }
      .ym-outWrapper .ym-container .ym-content .title {
        padding: 2em 0; }
        .ym-outWrapper .ym-container .ym-content .title h1 {
          font-weight: normal;
          font-size: 2.3em;
          text-align: center; }
      .ym-outWrapper .ym-container .ym-content .main h2 {
        font-weight: normal;
        font-size: 1.2em;
        padding: .8em 0; }
      .ym-outWrapper .ym-container .ym-content .main .intro-text {
        color: #444444;
        padding: .5em; }
        .ym-outWrapper .ym-container .ym-content .main .intro-text code {
          padding: .1em .2em; }
      .ym-outWrapper .ym-container .ym-content .main .show-area {
        width: 100%; }
        .ym-outWrapper .ym-container .ym-content .main .show-area .element {
          padding: 1em 0; }
          .ym-outWrapper .ym-container .ym-content .main .show-area .element div[class*="bordercolor"] {
            border-width: 1px;
            border-style: solid;
            margin: .2em 0; }
          .ym-outWrapper .ym-container .ym-content .main .show-area .element .ym-btn {
            margin-right: 5px; }
          .ym-outWrapper .ym-container .ym-content .main .show-area .element .ym-carousel li {
            background-color: #2775b6;
            font-size: 3em;
            color: #ffffff;
            text-align: center;
            line-height: 400px; }
        .ym-outWrapper .ym-container .ym-content .main .show-area pre {
          font-size: .9em;
          padding: 1em;
          display: block;
          border: 1px solid #813c85;
          overflow: auto;
          word-break: break-all;
          white-space: pre-wrap; }

.index-page {
  text-align: center; }
  .index-page h1 {
    font-size: 9em; }
  .index-page h2 {
    font-size: 2em;
    font-weight: normal;
    color: #666666;
    margin-bottom: 2em; }

@media screen and (max-width: 768px) {
  .ym-content {
    width: 100% !important; } }
